<template>
    <div class="home-wrapper">
        <el-button type="primary" @click="clickChangeTime">click me</el-button>
        <el-date-picker
            v-model="timePicker"
            type="date"
            placeholder="Pick a day"
            size="default"
        />
        <el-switch v-model="switchValue" />
        <CommonTable :asyncMethod="asyncMethod" ref="commonTableRef">
            <el-table-column label="编号">
                <template #default="scope">
                    {{ scope.row.order }}
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="name"> </el-table-column>
            <el-table-column label="爱好" prop="ball"> </el-table-column>
            <el-table-column label="日期" prop="date"> </el-table-column>
        </CommonTable>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onActivated } from "vue";
import CommonTable from "@/components/CommonTable.vue";
const timePicker = ref("");
const commonTableRef = ref();
const switchValue = ref(false);
onMounted(() => {
    commonTableRef.value.refreshTable();
});
onActivated(() => {
    console.log("home page onActivated");
});
const clickChangeTime = () => {
    timePicker.value = "1996-10-01";
};
const asyncMethod = (data: paramType) => {
    return new Promise((resolve) => {
        const { pageSize, currentPage } = data;
        const list = [];
        for (let i = 0; i < pageSize; i++) {
            const r = (currentPage - 1) * pageSize + i + 1;
            if (r > 25) break; // 模拟最多25条数据
            list.push({
                order: r,
                name: `name-${r}`,
                ball: `ball-${r}`,
                date: `date-${r}`,
            });
        }
        resolve(list);
    });
};
</script>

<style lang="scss" scoped>
.home-wrapper {
    width: 100%;
    .el-button {
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .el-switch {
        margin-left: 10px;
    }
}
</style>
